<template>
  <div class="product-container" v-title :data-title="$route.query.name">
    <div class="header">
      <span class="header-range">额度范围</span>
      <span class="header-money"><span>{{productInfo.loanMin||0}}</span>-<span>{{productInfo.loanMax||0}}</span><span class="unit">(元)</span></span>
    </div>
    <div class="product-card">
      <div class="product-card-content">
        <div class="card-item border-right">
          <span class="item-title"><span>{{productInfo.minRate||'-'}}%/</span>{{productInfo.maxTermUnit|formatTimeUnit('false')}}</span>
          <span class="item-desc">利息</span>
        </div>
        <div class="card-item border-right">
          <span class="item-title">{{productInfo.maxTerm||'-'}}{{productInfo.maxTermUnit|formatTimeUnit}}</span>
          <span class="item-desc">贷款期限</span>
        </div>
        <div class="card-item">
          <span class="item-title">{{productInfo.loanTime||'-'}}小时</span>
          <span class="item-desc">放款时长</span>
        </div>
      </div>
    </div>
    <div class="conditions-containter">
      <div class="item">
        <div class="item-title">
          <img class="icon" src="/static/img/Group%2013@2x.png">
          <span class="desc">贷款条件</span>
        </div>
        <ul class="item-list">
          <li class="list-item" v-if="productInfo.loanCondition && productInfo.loanCondition.length" v-for="item in productInfo.loanCondition"><span>{{item}}</span></li>
          <li class="list-item" v-if="!productInfo.loanCondition || !productInfo.loanCondition.length"><span>--</span></li>
        </ul>
      </div>
      <div class="item">
        <div class="item-title">
          <img class="icon" src="/static/img/Group%2013%20Copy%202@2x.png">
          <span class="desc">审核资料</span>
        </div>
        <ul class="item-list">
          <li class="list-item" v-if="productInfo.applicationInformation && productInfo.applicationInformation.length" v-for="item in productInfo.applicationInformation"><span>{{item}}</span></li>
          <li class="list-item" v-if="!productInfo.applicationInformation || !productInfo.applicationInformation.length"><span>--</span></li>
        </ul>
      </div>
      <div class="item">
        <div class="item-title">
          <img class="icon" src="/static/img/Group%2013%20Copy@2x.png">
          <span class="desc">其他</span>
        </div>
        <ul class="item-list">
          <li class="list-item" v-if="productInfo.remark"><span>{{productInfo.remark}}</span></li>
          <li class="list-item" v-if="!productInfo.remark"><span>--</span></li>
        </ul>
      </div>
    </div>
    <div class="info-container">
      <div class="item border-bottom">
        <span class="desc" style="color: #383838">贷款金额</span>
        <input style="width: 1.6rem;color: #666" type="text" class="item-input" v-model="submitInfo.money"
               placeholder="请输入金额"/>
      </div>
      <div class="item">
        <span class="item-name">预计期限</span>
        <span class="item-value" >
          <div class="item-value-addr"
               @click="selectVisible=true"
               :class="submitInfo.terms?'':'disabled-color'">{{submitInfo.terms ? submitInfo.terms.term: '请选择期限'}}<span v-if="submitInfo.terms">{{submitInfo.terms.unit | formatTimeUnit}}</span></div>
          <i class="icon"></i>
          <mt-popup v-model="selectVisible" position="bottom" class="mint-popup">
          <mt-picker :slots="termOptionsSlot"
                     value-key="term"
                     v-if="selectVisible"
                     ref="select"
                     showToolbar
                     >
             <mt-header class="mint-header">
                <mt-button slot="right" @click="selectConfirm" class="sure">确认</mt-button>
             </mt-header>
          </mt-picker>
          </mt-popup>
        </span>
      </div>
    </div>
    <div class="check-container">
      <img class="img-check" :src="imgNormal" @click="protocalAgree"/>
      <span class="protocal-content">已阅读并同意<a class="user-register-protocal" href="http://marketui.aishangjinfu.cn/protocol/unionRegisterProtocol.html">《联合注册协议》</a></span>
    </div>
    <button class="apply-button" :disabled="btnDisabled" @click="apply">立即申请</button>
    <success-modal ref="success"></success-modal>
    <fail-modal ref="fail"></fail-modal>
  </div>
</template>
<script>
  import {mapMutations, mapState} from 'vuex'
  import SuccessModal from '@/components/success.vue'
  import FailModal from '@/components/failed.vue'
  import { httpReq } from '@/common/api'
  export default{
    name: 'Product',
    data(){
      return {
        productInfo: {
          loanMin: '',
          loanMax: '',
          minRate: '',

        },
        submitInfo:{
          terms:'',
          money:''
        },
        selectVisible:false,
        imgNormal: '../../../../static/img/btn_select.png',
        btnDisabled:false
      }
    },
    components: {
      SuccessModal,
      FailModal
    },
    computed: {
      ...mapState({
        token: 'token',
        userTel: 'userTel',
        termOptions: 'termOptions'
      }),
      termOptionsSlot(){
        let dateSlots = [
          {
            flex: 1,
            values: this.termOptions,
            className: 'slot1',
            textAlign: 'center',
            defaultIndex:this._.findIndex(this.termOptions,(o)=>{
              return o == this.submitInfo.terms
            })
          }
        ]
        return dateSlots
      }
    },
    methods: {
      ...mapMutations(['changeUserTel', 'changeUserToken','getTermOptions']),
      protocalAgree: function () {
        const normal = '../../../../static/img/btn_normal.png'
        const select = '../../../../static/img/btn_select.png'
        this.imgNormal = this.imgNormal === normal ? select : normal
      },
      selectConfirm(){
        this.selectVisible=false
        this.submitInfo.terms = this.$refs.select.getValues()[0]
      },
      isNewUser(){
          const data = {
            "loanMoney": this.submitInfo.money,
            "loanTerm": this.submitInfo.terms.term,
            "loanTermUnit": this.submitInfo.terms.unit,
            "productId": this.$route.query.id,
          }
          return new Promise((resolve, reject) => {
            this.axios({
              method:'POST',
              url:'/list/as/app/financial/api/preLoanApplication',
              data:data
            }).then((res)=>{
              res=res.data;
              if(res.code===200){
                  if(res.data.result === 2){
                    reject(600)
                  }else {
                    resolve(res.data.result)
                  }
              }else {
                //是老用户但是订单提交失败code:600
                reject(res.code);
                this.$toast(res.msg)
              }
            }).catch((err)=>{
              reject(err)
              this.$toast('异常：'+err.data.message)
            })
          })
      },
      //立即申请
      apply(){
        if (!this.token || !this.userTel) {
          this.$router.push('/login');
          return
        }
        if(!this.submitInfo.money){
          this.$toast('请输入贷款金额');
          return
        }
        if(!this.submitInfo.terms){
          this.$toast('请选择预计期限');
          return
        }
        if(this.imgNormal==='../../../../static/img/btn_normal.png'){
          this.$toast('请同意并勾选《联合注册协议》');
          return
        }
        this.btnDisabled=true;
        this.isNewUser().then((res)=>{
          this.btnDisabled=false
          //是新用户
          if (res===1) {
            this.$router.push({
              name:'detailInfo',
              query:{
                termUnit:this.submitInfo.terms.unit,
                loanTerm:this.submitInfo.terms.term,
                loanMoney:this.submitInfo.money,
                productId:this.$route.query.id
              }
            })
          }else {
            //线上产品跳转至第三方
            if(this.productInfo.productUrl){
              window.location.href = this.productInfo.productUrl;
              return
            }
            this.$refs.success.confirm().then(() => {
              this.$refs.success.show = false
              this.$router.push('/index')
            })
          }
        }).catch((err)=>{
            this.btnDisabled=false
            if(err===600) {
              this.$refs.fail.confirm().then((res) => {
                this.$refs.fail.show = false
                if(res==='resubmit'){
                    this.apply()
                }

              })
            }
        })
      },
      getOrderInfo(){
        httpReq('GET',`/list/as/app/financial/api/LoanSupermarketProduct/${this.$route.query.id}`).then((res)=>{
          this.productInfo = res
          this.submitInfo.money=res.defaultMoney
        }).catch((err)=>{
          this.$toast(err)
        })
      }
    },
    created(){
      //获取url中的用户信息
//      const token = this.$route.query.token;
//      const phone = this.$route.query.phone;
//      if (token) {
//        this.changeUserToken(token)
//      }
//      if (phone) {
//        this.changeUserTel(phone)
//      }
      this.getOrderInfo()
      this.getTermOptions(this.$route.query.id)
    },
    watch:{
      termOptions(newval){
        if(newval.length){
          this.submitInfo.terms = this._.find(newval,(item)=>{
            if(item.isDefault){
              return item
            }
          })
        }
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "~style/varibles.styl"
  @import "~style/mixins.styl"
  .product-container >>> .picker-slot
    font-size .28rem
  .mint-header
    background-color $bgColor
    color $textButton
  .disabled-color
    color $disabledText
  .product-container
    width 100%
    height 100%
    background-color $bgColor
    .header
      width: 100%
      height: 3rem
      display: flex
      flex-direction: column
      text-align: center
      font-size: .30rem
      background: url("/static/img/Group%2010@2x.png") no-repeat
      background-size: 100% 100%
      color white
      .header-range
        font-size .3rem
        margin-top .52rem
      .header-money
        margin-top .22rem
        font-size .7rem
        font-weight bold
        .unit
          font-weight normal
          font-size .36rem
    .product-card
      position relative
      .product-card-content
        height 1.5rem
        width 95%
        border-radius .08rem
        background-color white
        position absolute
        top 0
        margin-left 2.5%
        transform: translateY(-50%)
        display flex
        box-shadow()
        .card-item
          text-align center
          flex 1
          display flex
          flex-direction column
          margin .34rem 0 .28rem 0
          .item-title
            color #383838
            font-size .38rem
            font-weight bold
          .item-desc
            line-height .75rem
            font-size .24rem
            color $disabledText
    .conditions-containter
      border-radius .08rem
      background-color white
      margin 1.05rem 2.5% 0 2.5%
      padding .3rem
      .item
        background-color white
        .item-title
          display flex
          align-items center
          .icon
            width .42rem
            height .42rem
          .desc
            font-weight bold
            color #383838
            font-size .30rem
            margin-left .2rem
        .item-list
          list-style disc
          font-size .30rem
          color #666666
          margin-left calc(2.5% + .8rem)
          margin-top .08rem
          line-height .45rem
          span
            font-size .26rem
      .item + .item
        margin-top .4rem
    .info-container
      border-radius .08rem
      background-color white
      margin .24rem 2.5% 0 2.5%
      padding .3rem
      input:
      :-webkit-input-placeholder
        color: $disabledText
      .item
        display flex
        align-items center
        line-height 1rem
        justify-content space-between
        margin 0 .24rem
        .item-name
          color #383838
          display flex
          align-items center
          .is-must
            position relative
            top .06rem
            color $isMust
        .item-value
          background-color white
          display flex
          align-items center
          min-width 1.64rem
          justify-content space-between
          .item-value-addr
            font-size .25rem
          .icon
            width .3rem
            height .3rem
            display inline-block
            background url("/static/img/go-arrow.png") no-repeat
            background-size .15rem .3rem
          .mint-popup
            width 100%
    .check-container
      display: flex
      align-items center
      margin: .4rem 2.5%
      .img-check
        width: .34rem
        height: .34rem
      .protocal-content
        font-size: .26rem
        margin-left: .16rem
        .user-register-protocal
          color: $textButton
    .apply-button
      width: 95%
      margin-left 2.5%
      margin-bottom .6rem
      height: .88rem
      border-radius: .08rem
      line-height: .88rem
      font-size: .32rem
      background: linear-gradient(to right, $gradientDeep, $gradientTint)
      color: white
</style>
